<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   @click="addDataDialog()">
          添加子公司
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading"
              :data="tableData"
              border
              stripe
              style="width: 100%"
              @sort-change="sortChange">
      <el-table-column prop="id"
                       label="ID"
                       width="100"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="公司名称"
                       min-width="300"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="realname"
                       label="管理员"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.adminVO.realname }}
        </template>
      </el-table-column>
      <el-table-column prop="phone"
                       label="手机号码"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.adminVO.phone }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at"
                       label="创建时间"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.createdAt }}
        </template>
      </el-table-column>
      <el-table-column prop="updated_at"
                       label="更新时间"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.updatedAt }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       fixed="right"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="editDataDialog(scope.row)">编辑</el-button>
          <el-button type="text"
                     @click="resetData(scope.row)">重置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加子公司"
               width="40%"
               :visible.sync="dialogAddDataVisible">
      <add-data ref="addData"
                style="margin-left:30px;"
                :loading="loadingAddData"
                @submit="addDataInfo" />
    </el-dialog>

    <el-dialog title="编辑子公司"
               width="40%"
               :visible.sync="dialogEditDataVisible">
      <edit-data style="margin-left:30px;"
                 :row="row"
                 :loading="loadingEditData"
                 @submit="editDataInfo" />
    </el-dialog>
  </div>
</template>

<script>
import { addSonCompany, editSonCompany, resetSonCompanyAdmin } from '@/api/company'
import AddData from './components/add'
import EditData from './components/edit'
export default {
  components: { AddData, EditData },
  props: {
    tableData: {
      default: () => [],
      type: Array
    },
    loading: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      dialogAddDataVisible: false,
      dialogEditDataVisible: false,
      loadingAddData: false,
      loadingEditData: false,
      row: { id: null, name: null, pid: null, adminId: null, realname: null, phone: null }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    sortChange(sort) {
      this.$emit('change', {
        field: sort.prop,
        rule: sort.order
      })
      this.$emit('submit')
    },
    addDataDialog() {
      this.dialogAddDataVisible = true
      this.$nextTick(() => {
        this.$refs.addData.handleFormReset()
      })
    },
    editDataDialog(row) {
      this.dialogEditDataVisible = true
      const { id, name, pid, adminId } = row
      const { realname, phone } = row.adminVO
      this.row = { id, name, pid, adminId, realname, phone }
    },
    addDataInfo(form) {
      this.loadingAddData = true
      addSonCompany(form).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingAddData = false
        this.dialogAddDataVisible = false
      }).catch(err => {
        this.loadingAddData = false
      })
    },
    editDataInfo(form) {
      this.loadingEditData = true
      editSonCompany(form).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingEditData = false
        this.dialogEditDataVisible = false
      }).catch(err => {
        this.loadingEditData = false
      })
    },
    resetData(row) {
      this.$confirm('您将重置' + row.name + '管理员帐号' + row.adminVO.phone + '密码为123456, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetSonCompanyAdmin({ adminId: row.adminId }).then(res => {
          this.$message({
            message: '密码重置成功',
            type: 'success',
            duration: 3 * 1000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.el-table th.gutter {
  display: table-cell !important;
}
.el-table td.is-center {
  top: 1px !important;
}
</style>
